<template>
  <header class="header">
    <router-link to="/" class="logo">
      <i class="fa fa-logo"></i>
    </router-link>
    <router-link class="nav" tag="div" to="/search">
      <van-icon name="search" class="icon" />
      <span>请输入关键词</span>
    </router-link>
    <section class="mine" @click="toMine">
      <img class="mine-img" src="@/assets/placeholder.png" />
    </section>
  </header>
</template>

<script>
import { Icon as VanIcon, Toast } from 'vant'
export default {
  name: 'TheHeader',
  components: {
    VanIcon
  },
  methods: {
    toMine () {
      // TODO: 用户管理功能
      Toast('功能开发中，请稍候...')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  line-height: 44px;
  padding: {
    left: 18px;
    right: 10px;
  }
  background-color: $color-white;
}
.logo {
  display: flex;
  align-items: center;
  height: 100%;
  .fa{
    font-size: 28px;
    color: $theme-color;
  }
}
.mine {
  display: flex;
  align-items: center;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background-color: $color-grey;
  &-img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.nav {
  flex: 2;
  display: flex;
  align-items: center;
  margin: 0 20px;
  background-color: $color-grey;
  padding: 0 12px;
  border-radius: 13px;
  color: $color-text-secondary;
  height: 26px;
  font-size: 12px;
  .icon {
    font-size: 16px;
  }
}
</style>
